<template>
  <div class="reportReview">
    <el-card>
      <div class="searchBox">
        <el-input
          placeholder="请输入举报人ID"
          v-model="userId"
          oninput="value=value.replace(/[^\d]/g,'')"
        >
          <template slot="prepend">举报人ID</template>
        </el-input>
        <el-input
          placeholder="请输入举报序号"
          v-model="sortNumber"
          oninput="value=value.replace(/[^\d]/g,'')"
        >
          <template slot="prepend">举报序号</template>
        </el-input>
        <el-button type="primary" class="btn" @click="searchBtn"
          >查询搜索</el-button
        >
      </div>
      <div class="p">
        <p :class="{ active: index == 1 }" @click="activeStatusA()">未审核</p>
        <p :class="{ active: index == 2 }" @click="activeStatusB()">已审核</p>
      </div>

      <!-- 未审核列表 -->
      <div v-if="this.index == 1">
        <el-table
          :data="tableData"
          v-loading="loading"
          style="width: 100%"
          center
        >
          <el-table-column prop="id" label="举报序号"> </el-table-column>
          <el-table-column prop="reportTime" label="举报时间">
          </el-table-column>
          <el-table-column prop="userId" label="举报人ID"> </el-table-column>
          <el-table-column prop="userName" label="举报人"> </el-table-column>
          <el-table-column prop="reportUserId" label="举报对象ID">
          </el-table-column>
          <el-table-column prop="reportUserName" label="举报对象">
          </el-table-column>
          <el-table-column prop="describes" label="举报内容"> </el-table-column>
          <el-table-column prop="picture" label="附件" width="280">
            <template slot-scope="scope">
              <!-- <img
                v-for="i in scope.row.picture"
                :key="i"
                :src="i"
                alt
                preview
                class="img"
              /> -->
              <el-image
                v-for="i in scope.row.picture"
                :key="i"
                class="img"
                :src="i"
                :preview-src-list="[i]"
              >
              </el-image>
              <!-- <el-badge
                :value="scope.row.picture.length"
                class="item"
                type="info"
              >
                <el-image
                  class="img"
                  :src="scope.row.picture[0]"
                  :preview-src-list="scope.row.picture"
                >
                </el-image>
              </el-badge> -->
              <!-- <img
                src="https://ui-avatars.com/api/?name=无头像&length=3&font-size=0.23"
                alt
                v-else
                class="img"
              /> -->
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleBtn(scope.row)"
                >处理</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="page"
          :limit.sync="pageSize"
          @pagination="getList"
        />
      </div>

      <!-- 已审核列表 -->
      <div v-if="this.index == 2">
        <el-table
          :data="tableDataA"
          v-loading="loadingA"
          style="width: 100%"
          center
        >
          <el-table-column prop="id" label="举报序号"> </el-table-column>
          <el-table-column prop="reportTime" label="举报时间">
          </el-table-column>
          <el-table-column prop="dealTime" label="审核时间"> </el-table-column>
          <el-table-column prop="userId" label="举报人ID"> </el-table-column>
          <el-table-column prop="userName" label="举报人"> </el-table-column>
          <el-table-column prop="reportUserId" label="举报对象ID">
          </el-table-column>
          <el-table-column prop="reportUserName" label="举报对象">
          </el-table-column>
          <el-table-column prop="describes" label="举报内容">
            <template slot-scope="scope">
              <span>
                {{ scope.row.describes }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="picture" label="附件" width="280">
            <template slot-scope="scope">
              <!-- <img
                v-for="i in scope.row.picture"
                :key="i"
                :src="i"
                alt
                preview
                class="img"
              /> -->
              <el-image
                v-for="i in scope.row.picture"
                :key="i"
                class="img"
                :src="i"
                :preview-src-list="[i]"
              >
              </el-image>
              <!-- <img
                src="https://ui-avatars.com/api/?name=无头像&length=3&font-size=0.23"
                alt
                v-else
                class="img"
              /> -->
            </template>
          </el-table-column>
          <el-table-column prop="result" label="审核结果">
            <template slot-scope="scope">
              <span>{{ scope.row.result }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="处理">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="goReviewed(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="totalA > 0"
          :total="totalA"
          :page.sync="pageA"
          :limit.sync="pageSizeA"
          @pagination="getListA"
        />
      </div>

      <!-- 未审核处理弹框 -->
      <el-dialog title="举报处理" :visible.sync="dialogVisible" width="46%">
        <div class="dialogItem">
          <p>
            <span>举报序号</span
            ><el-input
              disabled
              v-model="id"
              placeholder="请输入举报序号"
            ></el-input>
          </p>
          <p>
            <span>举报时间</span
            ><el-input
              disabled
              v-model="reportTime"
              placeholder="请输入举报时间"
            ></el-input>
          </p>
        </div>
        <div class="dialogItem">
          <p>
            <span>举报人ID</span
            ><el-input
              disabled
              v-model="userIdB"
              placeholder="请输入举报人ID"
            ></el-input>
          </p>
          <p>
            <span>举报人</span
            ><el-input
              disabled
              v-model="userName"
              placeholder="请输入举报人"
            ></el-input>
          </p>
        </div>
        <div class="dialogItem">
          <p>
            <span>被举报人ID</span
            ><el-input
              disabled
              v-model="reportUserId"
              placeholder="请输入被举报人ID"
            ></el-input>
          </p>
          <p>
            <span>被举报人</span
            ><el-input
              disabled
              v-model="reportUserName"
              placeholder="请输入被举报人"
            ></el-input>
          </p>
        </div>
        <div class="dialogItemImg">
          <p>
            <span>举报内容</span><span class="dialogSpan">{{ describes }}</span>
          </p>
          <p class="pImg">
            <!-- <img
              v-for="i in picture"
              :key="i"
              class="dialogImg"
              :src="i"
              alt=""
            /> -->
            <el-image
              v-for="i in picture"
              :key="i"
              class="dialogImg"
              :src="i"
              :preview-src-list="picture"
            >
            </el-image>
          </p>
        </div>
        <div class="dialogItemImg">
          <p>
            <span>违规判定</span>
            <el-radio v-model="result" label="2">用户违规</el-radio>
            <el-radio v-model="result" label="1">用户未违规</el-radio>
          </p>
        </div>

        <div v-if="this.result == 2">
          <!-- <div class="dialogItemImg">
            <p>
              <span>举报处理</span>
              <el-radio v-model="radio" label="1">封禁违规账号</el-radio>
            </p>
          </div> -->
          <div class="dialogItemImg">
            <p>
              <span>违规原因</span>
              <el-radio v-model="banReason" label="资料作假">资料作假</el-radio>
              <el-radio v-model="banReason" label="广告营销">广告营销</el-radio>
              <el-radio v-model="banReason" label="诈骗托儿">诈骗托儿</el-radio>
              <el-radio v-model="banReason" label="色情低俗">色情低俗</el-radio>
              <el-radio v-model="banReason" label="恶意骚扰">恶意骚扰</el-radio>
              <el-radio v-model="banReason" label="其他">其他</el-radio>
            </p>
          </div>
          <div class="dialogItemImg">
            <p>
              <span>封禁功能</span>
              <!-- <el-radio v-model="banType" label="1">封禁账号</el-radio> -->
              <el-checkbox-group v-model="banType">
                <el-checkbox label="1">封禁账号</el-checkbox>
                <!-- <el-checkbox label="2">封禁匹配</el-checkbox> -->
                <!-- <el-checkbox label="3">封禁预约</el-checkbox> -->
                <!-- <el-checkbox label="4">封禁充值</el-checkbox> -->
                <!-- <el-checkbox label="5">封禁提现</el-checkbox> -->
              </el-checkbox-group>
            </p>
          </div>
          <div class="dialogItemImg">
            <p>
              <span>封禁时间</span>
              <el-radio v-model="banDays" label="1">1天</el-radio>
              <el-radio v-model="banDays" label="3">3天</el-radio>
              <el-radio v-model="banDays" label="7">7天</el-radio>
              <el-radio v-model="banDays" label="15">15天</el-radio>
              <el-radio v-model="banDays" label="30">30天</el-radio>
              <el-radio v-model="banDays" label="-1">永久</el-radio>
            </p>
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="feedbackReportShBtn"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 举报审核弹窗 -->
      <el-dialog
        :close-on-click-modal="false"
        :show-close="false"
        :visible.sync="dialogVisible1"
        width="30%"
        :before-close="handleClose1"
      >
        <span>
          <i class="el-icon-warning" style="font-size: 20px"></i>
          此用户账号已
          <!-- 于{{
            this.reportTime == "-1" ? "永久" : this.reportTime
          }} -->
          封禁{{ this.banDays }}天,是否要关闭其余举报</span
        >
        <span slot="footer" class="dialog-footer">
          <el-button @click="choice(0)">否</el-button>
          <el-button type="primary" @click="choice(1)">是</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { feedbackReportList, feedbackReportSh } from "@/api/AuditManagement";
import Pagination from "@/components/Pagination"; // 分页

export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      loading: true,
      loadingA: true,
      dialogVisible1: false,
      index: 1,
      userId: "",
      sortNumber: "",
      input: "",
      radio: "1", //违规判定
      checked: true,

      dialogVisible: false, //未审核处理弹框
      tableData: [],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数

      tableDataA: [],
      totalA: 0,
      pageA: 1, //页码
      pageSizeA: 10, //每页条数

      //未审核弹框
      id: "", //序号
      reportTime: "", //举报时间
      userId: "", //举报人id
      userName: "", //举报人名称
      describes: "", //举报内容
      picture: [], //图片数组
      result: "", //审核类型 1.用户未违规 2.用户违规
      reportUserId: "", //被举报人id
      reportUserName: "", //被举报人姓名
      banReason: "", //封禁原因
      banType: [], //封禁类型 0未封禁 1.封禁账号 2.封禁匹配 3.封禁预约
      banDays: "", //封禁天数
      dealTime: "", //处理时间
    };
  },
  methods: {
    no() {},
    //审核列表
    feedbackReportList() {
      this.loading = true;
      feedbackReportList({
        page: this.page,
        pageSize: this.pageSize,
        userId: "",
        sortNumber: "", //序号
        type: 0, //0：未处理 1.已处理   全部则传-1
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    //分页
    getList() {
      this.loading = true;

      feedbackReportList({
        page: this.page,
        pageSize: this.pageSize,
        userId: this.userId,
        sortNumber: this.sortNumber, //序号
        type: 0, //0：未处理 1.已处理   全部则传-1
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    getListA() {
      this.loadingA = true;

      feedbackReportList({
        page: this.pageA,
        pageSize: this.pageSizeA,
        userId: this.userId,
        sortNumber: this.sortNumber, //序号
        type: 1, //0：未处理 1.已处理   全部则传-1
      }).then((res) => {
        // console.log(res);
        if (res.code == 0) {
          this.tableDataA = res.data.list;
          // console.log(this.tableDataA);
          this.totalA = parseInt(res.data.count);
          this.loadingA = false;

          for (let i = 0; i < this.tableDataA.length; i++) {
            var result = this.tableDataA[i];
            if (result.result == 1) {
              result.result = "用户未违规";
            } else {
              result.result = "用户违规";
            }
          }
        }
      });
    },
    //未审核处理
    handleBtn(row) {
      this.dialogVisible = true;
      this.id = row.id;
      this.reportTime = row.reportTime;
      this.userIdB = row.userId;
      this.userName = row.userName;
      this.reportUserId = row.reportUserId;
      this.reportUserName = row.reportUserName;
      this.describes = row.describes;
      this.picture = row.picture;
      this.result = "1";
      this.banReason = "资料作假";
      this.banType = ["1"];
      this.banDays = "1";
    },
    //未审核确定
    feedbackReportShBtn() {
      feedbackReportSh({
        id: this.id, //序号id
        type: this.result, //审核类型 1.用户未违规 2.用户违规
        banType: this.banType, //封禁类型 0未封禁 1.封禁账号 2.封禁匹配 3.封禁预约
        reason: this.banReason, //封禁原因类型
        day: this.banDays, //封禁天数
        is_close: 0,
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          if (this.result == 2) {
            this.dialogVisible1 = true;
          }
          this.dialogVisible = false;
          this.getList();
          // this.reload();
        }
      });

      // feedbackReportSh({
      //   id: this.id, //序号id
      //   type: this.result, //审核类型 1.用户未违规 2.用户违规
      //   banType: this.banType, //封禁类型 0未封禁 1.封禁账号 2.封禁匹配 3.封禁预约
      //   reason: this.banReason, //封禁原因类型
      //   day: this.banDays, //封禁天数
      // }).then((res) => {
      //   if (res.code == 0) {
      //     this.$message({
      //       message: "操作成功",
      //       type: "success",
      //     });
      //     this.dialogVisible = false;
      //     this.reload();
      //   }
      // });
    },
    choice(close) {
      feedbackReportSh({
        id: this.id, //序号id
        type: this.result, //审核类型 1.用户未违规 2.用户违规
        banType: this.banType, //封禁类型 0未封禁 1.封禁账号 2.封禁匹配 3.封禁预约
        reason: this.banReason, //封禁原因类型
        day: this.banDays, //封禁天数
        is_close: close,
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.reload();
        }
      });
    },
    //详情
    goReviewed(row) {
      console.log(row);
      this.$router.push("/AuditManagement/Reviewed");
      localStorage.setItem("reviewed", JSON.stringify(row));
    },
    activeStatusA() {
      this.loading = true;

      this.index = 1;
      feedbackReportList({
        page: this.page,
        pageSize: this.pageSize,
        userId: this.userId,
        sortNumber: this.sortNumber, //序号
        type: 0, //0：未处理 1.已处理   全部则传-1
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    activeStatusB() {
      this.loadingA = true;

      this.index = 2;
      feedbackReportList({
        page: this.page,
        pageSize: this.pageSize,
        userId: this.userId,
        sortNumber: this.sortNumber, //序号
        type: 1, //0：未处理 1.已处理   全部则传-1
      }).then((res) => {
        console.log(res);
        if (res.code == 0) {
          console.log(res);
          this.tableDataA = res.data.list;
          this.totalA = parseInt(res.data.count);
          this.loadingA = false;

          for (let i = 0; i < this.tableDataA.length; i++) {
            var result = this.tableDataA[i];
            if (result.result == 1) {
              result.result = "用户未违规";
            } else {
              result.result = "用户违规";
            }
          }
        }
      });
    },
    //搜索
    searchBtn() {
      var num = "";
      if (this.index == 1) {
        num = 0;
        this.loading = true;

        feedbackReportList({
          page: this.page,
          pageSize: this.pageSize,
          userId: this.userId,
          sortNumber: this.sortNumber, //序号
          type: num, //0：未处理 1.已处理   全部则传-1
        }).then((res) => {
          if (res.code == 0) {
            this.tableData = res.data.list;
            this.total = parseInt(res.data.count);
            this.loadingA = false;
          }
        });
      } else {
        num = 1;
        this.loadingA = true;

        feedbackReportList({
          page: this.page,
          pageSize: this.pageSize,
          userId: this.userId,
          sortNumber: this.sortNumber, //序号
          type: num, //0：未处理 1.已处理   全部则传-1
        }).then((res) => {
          if (res.code == 0) {
            this.tableDataA = res.data.list;
            this.totalA = parseInt(res.data.count);
            this.loadingA = false;

            for (let i = 0; i < this.tableDataA.length; i++) {
              var result = this.tableDataA[i];
              if (result.result == 1) {
                result.result = "用户未违规";
              } else {
                result.result = "用户违规";
              }
            }
          }
        });
      }
    },
  },
  created() {
    this.feedbackReportList();
  },
};
</script>

<style lang="less" scoped>
.reportReview {
  margin: 30px;
  height: 100%;
  .searchBox {
    display: flex;
    .el-input {
      width: 300px;
      margin-right: 20px;
    }
  }
  .p {
    display: flex;
    margin: 20px 0px;
    p {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  }
  .active {
    background-color: #0079fe;
    color: #fff;
    border-radius: 10px;
  }
  .el-table {
    .img {
      width: 80px;
      height: 80px;
      border-radius: 10px;
      margin-right: 10px;
    }
  }
  .el-dialog {
    .dialogItem {
      display: flex;
      p {
        span {
          width: 80px;
          display: inline-block;
          text-align: right;
        }
        .el-input {
          width: 200px;
          margin-left: 10px;
        }
      }
    }
    .dialogItemImg {
      p {
        display: flex;
        span {
          width: 80px;
          display: inline-block;
          text-align: right;
        }
        .el-radio,
        .el-checkbox {
          margin-left: 10px;
        }
        .dialogSpan {
          width: 100%;
          display: inline-block;
          text-align: left;
          margin-left: 10px;
        }
      }
      .pImg {
        .dialogImg {
          width: 80px;
          height: 80px;
          margin-left: 11%;
          border-radius: 10px;
        }
      }
    }
  }
}
</style>